<template>
  <div class="video">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="title">防诈短视频</div>
    </div>

    <!-- 视频列表 -->
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="video-item" v-for="item in videoList" :key="item.id">
            <div class="video-card">
              <div class="video-cover">
                <van-image :src="item.cover" width="100%" height="240" fit="cover" />
                <div class="play-overlay">
                  <van-icon name="play-circle-o" class="play-icon" />
                </div>
              </div>
              <div class="video-info">
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.description }}</div>
                <div class="stats">
                  <span><van-icon name="eye-o" class="stat-icon" /> {{ item.views }}</span>
                  <span><van-icon name="like-o" class="stat-icon" /> {{ item.likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 底部导航栏 -->
    <TabBar />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import api from '@/api'
import TabBar from '@/components/TabBar.vue'
import { List, PullRefresh } from 'vant'

// 列表相关
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const videoList = ref([])
const page = ref(1)
const pageSize = ref(10)

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  page.value = 1
  videoList.value = []
  onLoad()
}

// 加载更多
const onLoad = async () => {
  try {
    loading.value = true
    const res = await api.video.list({
      page: page.value,
      pageSize: pageSize.value
    })
    
    if (refreshing.value) {
      videoList.value = []
      refreshing.value = false
    }

    if (res.code === 0) {
      videoList.value.push(...res.data)
      page.value++
      
      if (res.data.length < pageSize.value) {
        finished.value = true
      }
    } else {
      showToast('获取视频列表失败')
    }
  } catch (error) {
    console.error('获取视频列表失败:', error)
    showToast('获取视频列表失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  onLoad()
})
</script>

<style lang="scss" scoped>
.video {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: linear-gradient(135deg, #4fc08d, #42b983);
  box-shadow: 0 4px 12px rgba(79, 192, 141, 0.2);

  .title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.content {
  flex: 1;
  overflow-y: auto;
  margin-top: 80px; 
  padding: 20px 16px 60px; 
}

.video-item {
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-cover {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
  }

  .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .play-icon {
    font-size: 64px;
    color: #4fc08d;
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .van-image {
    border-radius: 0;
    height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .video-item:hover & {
    transform: scale(1.02);
  }
}

.video-info {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
}

.desc {
  font-size: 16px;
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 12px;
}

.stats {
  display: flex;
  gap: 20px;
  color: #95a5a6;
  font-size: 14px;

  .stat-icon {
    color: #7f8c8d;
    font-size: 18px;
    margin-right: 4px;
  }
}
</style>